<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS This 使用</title>
    <style>
        .container {
            width: 70%;
            margin: 0 auto;
        }
    </style>
    <script>
        function showThis() {
            console.log(this);
        }
        showThis();  // 在这里this是全局变量Window

        (function () {
            function Point(x, y) {
                this.x = x;
                this.y = y;

                showThis(); // 在这里, this是Window

                this.showThis = showThis;       //this.showThis设置了Point的环境
            }
            showThis();         // 在这里, this还是Window

            let pt = new Point(1, 2);
            pt.showThis();

            //使用原型模式
            Point.prototype.show = function () {
                console.log('Point.prototype.show', this);
            }
            pt.show();

            //使用原型模式
            Point.prototype.show2 = function () {
                return function(){
                    console.log('Point.prototype.show2', this);
                }
            }
            // pt.show2()返回一个函数，然后在当前环境调用， 所以this又变成全局了
            pt.show2()();


            function innerShowThis() {
                console.log(this);   // 在这里, this还是Window
            }
            innerShowThis();


        })();

    </script>
</head>

<body>
    <div class="container">
        <article>
            <h1>this</h1>
            <p>this在JavaScript中是一个传递到函数的环境变量</p>
        </article>

    </div>
</body>

</html>